<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-top:20px">
       <el-col>
         <h3>科室信息</h3>
       </el-col>
       <!-- <el-col>
         <el-button type="primary" @click="departmentShow">添加</el-button>
       </el-col> -->
    </el-row>
    <el-table
      :data="options"
      border
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        >
      </el-table-column>
       <el-table-column
        prop="depName"
        label="科室名字"
        >
      </el-table-column>
       <!-- <el-table-column
        label="操作">
         <template slot-scope="{row}">
            <el-button type="danger" @click="delDepartment(row.id)">删除</el-button>
          </template>
      </el-table-column> -->
    </el-table>
     <Pagination
        :total='total_count'
        :currentPage='currentPage'
        :pageSize='pageSize'
        @handleSizeChange="pageSizeChange"
        @handleCurrentChange="currentPageChange"
        style="margin-top:20px"
     />

     <!-- 添加科室信息 -->
     <el-dialog
        title="添加科室"
        :visible.sync="show"
        width="30%">
       <el-form ref="doctorForm" :model='form' >
        <el-form-item label="科室名称：">
          <el-input v-model="form.consName" placeholder="请输入科室名称"></el-input>
        </el-form-item>
       </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="doctorShow = false">取 消</el-button>
          <el-button type="primary" @click="addDepartment">确 定</el-button>
        </span>
      </el-dialog>
  </div>
</template>

<script>
import { validPhone } from '@/utils/validate'
import Pagination from '@/components/Form/Pagination.vue'
// import RecommmendedDoctor from './recommendedDoctor.vue'
import { getAllDepName,delDepartment,addDep } from '@/api/user'
import chalk from 'chalk'
export default {
  name:'addDepartment',
  components: {
    // RecommmendedDoctor,
    Pagination
  },
  data() {
    return {
      form: {
        consName: ''
      },
     
      show: false,
      currentPage:1,//当前选中页
      total_count:10,//总页数
      pageSize:10,//分页条数
      options:[], // 所有科室信息
      dactors:[], // 所有医生信息
    }
  },
  mounted(){
    this.getAllDepName()
  },
  methods: {
     // pageSize分页条数改变
      pageSizeChange(size){
         this.pageSize = size
      },
      // 当前页数改变
      currentPageChange(page){
         this.currentPage = page
      },
       // 所有科室信息
    async getAllDepName(){
      this.options = await getAllDepName()
    },
    // 添加科室信息
    departmentShow(){
      this.show = true
    },
   async addDepartment(){
      try {
      await addDep(this.form)  
      this.$message.success('添加成功')
      this.show = false
      } catch (error) {
        console.log(error)
      }
    },
    // 删除科室信息
   async delDepartment(id){
        try {
          await delDepartment(id)
          this.$message.success('删除成功')
        } catch (error) {
          // console.log(error)
          this.$message.error(error)
        }  
    }
  }
}
</script>

<style>

</style>
